<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			#menu{
				width: 710px;
				height: 78px;
				margin: auto;
				padding-left: 25px;
				background: url(img/navBg.png);
				position: relative;
				margin-top: 10px;
			}
			.nav{
				width: 700px;
				height: 72px;	
				list-style: none;	
				background: transparent;	
			}
			.nav>li{
				float: left;
				width: 100px;
				line-height: 72px;
				text-align: center;
			}
			.nav>li>a{
				display: block;
				z-index: 2;	
				position: relative;
				color:#FF4500;
				text-decoration: none;
				font-size: 14px;
				transition:0.2s;
			}
			.hover{
				position: absolute;
				left: 28px;
				top: -3px;
				width: 100px;
				height: 76px;
				background: url(img/navA_hover.png);
			}
			.wrapper{
				width: 1100px;
				margin: auto;
			}   
        #box{ width:434px; 
            height:200px;
             position:relative;
              margin:50px auto; 
              overflow:hidden;
          }    
        #box>ul{
             position:absolute;
             left:0; 
             top:0;
             list-style: none;
         }    
        #box>ul>li{ 
            float:left;
            width:434px; 
            height:200px;
        }    
        #box>ul>li>img{
            width: 100%;/* 我自己写的*/
            height:200px;
        }    
        #box>a{ transition:.2s all ease;}    
        #box .prev,#box .next{
            position:absolute; 
             top:50%; z-index:2; 
             height:80px; 
             line-height:80px; 
             background:rgba(0,0,0,0.6); 
             color:#fff; 
             width:80px; 
             text-align:center; 
             margin-top:-40px;
              /*display:-none;*/
        }    
        #box .prev{ left:0;}    
        #box .next{ right:0;}    
        #box>a:hover{ background:rgba(255,0,0,0.4);}    
        #box>ol{ 
            position:absolute;
             width:120px; 
             left:50%; 
             margin-left:-60px;
              bottom:10px;
          }    
        #box>ol>li{ 
            width:20px;
            height:20px; 
            background:#f60; 
            float:left; 
            margin:2px; 
            text-align:center; 
            /*下面这样代码是让读者看不到里面的字*/
            text-indent:-9999px; 
            border-radius:50%;
        }    
        #box>ol>li.active{ background:#fff;}    
		</style>
		<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="wrapper">
			<div id="menu">
				<div class="hover"></div>
				<ul class="nav">
					<li><a href="#">首页</a></li>
					<li><a href="#">导航</a></li>
					<li><a href="#">菜单</a></li>
					<li><a href="#">关于</a></li>
					<li><a href="#">产品</a></li>
					<li><a href="#">售后</a></li>
					<li><a href="#">售后</a></li>
				</ul>
			</div>
			<div id="box">    
		        <a href="javascript:;" class="prev" id="prev">prev</a>    
		        <a href="javascript:;" class="next" id="next">next</a>    
		        <ul>    
		            <li><img src="img/9.jpg"></li>    
		            <li><img src="img/1.jpg"></li>    
		            <li><img src="img/2.jpg"></li>    
		            <li><img src="img/3.jpg"></li>    
		            <li><img src="img/8.jpg"></li>    
		        </ul>    
		        <ol>    
		            <li class="active">0</li>    
		            <li>1</li>    
		            <li>2</li>    
		            <li>3</li>    
		            <li>4</li>    
		        </ol>    
		    </div>
		</div>
	</body>
	<script type="text/javascript">
		var oMenu=document.getElementById("menu");
		var oNav=oMenu.children[1];
		var Li=oNav.children;
		var oHover=oMenu.children[0];
		for(var i=0;i<Li.length;i++){
			(function(n){
				Li[n].onmousemove=function(){
					startMove(oHover,"left",n*oHover.offsetWidth+28);
					this.children[0].style.color="#FFFF00";
				}
				Li[n].onmouseout=function(){
					startMove(oHover,"left",28);
					this.children[0].style.color="#FF4500";
				}
			})(i);		
		}
	</script>
	 <script>    
        window.onload=function(){    
            var oBox=document.getElementById('box');    
            var oPrev=document.getElementById('prev');    
            var oNext=document.getElementById('next');    
            var oUl=oBox.getElementsByTagName('ul')[0];    
            var aLi=oUl.children;    
            var oOl=oBox.getElementsByTagName('ol')[0];    
            var aBtn=oOl.children;    
            var timer = null;    
            var iNow=0;    
            var left=0;    
                 
            //复制一份内容    
            oUl.innerHTML+=oUl. innerHTML;    
            oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';    
                 
            var W=oUl.offsetWidth/2;    
                 
            //选项卡    
            for(var i=0; i<aBtn.length; i++){    
                (function(index){    
                    aBtn[i].onclick=function(){    
                        if(iNow%aBtn.length==aBtn.length-1 && index==0){    
                            iNow++;
             
                        }    
                        if(iNow%aBtn.length==0 && index==aBtn.length-1){    
                            iNow--;
             
                        }    
                        iNow=Math.floor(iNow/aBtn.length)*aBtn.length+index;    
                        tab();    
                    }    
                })(i);    
            }    
                     
            function tab(){    
                for(var i=0; i<aBtn.length; i++){    
                    aBtn[i].className='';    
                }    
                if(iNow<0){    
                    aBtn[(iNow%aBtn.length+aBtn.length)%aBtn.length].className='active';    
                }else{    
                    aBtn[iNow%aBtn.length].className='active'; 
             
                }    
                //oUl.style.left=-iNow*aLi[i].offsetWidth+'px';    
                move(oUl,-iNow*aLi[i].offsetWidth);
             
            }    
                 
            //next    
            oNext.onclick=function(){    
                iNow++;    
                tab();    
                //document.title=iNow;    
            };    
            oPrev.onclick=function(){    
                iNow--;    
                tab();    
                     
                //document.title=iNow;    
            };    
                 
            oNext.onmouseleave = oPrev.onmouseleave = function(){    
                timer = setInterval(function(){    
                    tab();    
                    iNow++;    
                },2000);    
            };    
            oNext.onmouseenter = oPrev.onmouseenter = function(){    
                clearInterval(timer);    
            };    
                 
            oNext.onclick();    
            clearInterval(timer);    
            timer = setInterval(oNext.onclick,2000);    
                 
            function move(obj,iTarget){    
                var count=Math.round(500/30);   // 17
                var start=left;      //0
                var dis=iTarget-start;    
                var n=0;    
                clearInterval(obj.timer);    
                     
                obj.timer=setInterval(function(){    
                    n++;    
                         
                    var a=1-n/count;    
                    left=start+dis*(1-Math.pow(a,3));    
                         
                    if(left<0){    
                        obj.style.left=left%W+'px';
             
                    }else{    
                        obj.style.left=(left%W-W)%W+'px';  
             
                    }    
                         
                    if(n==count){    
                        clearInterval(obj.timer);  
             
                    }    
                },30);    
            }    
        };    
    </script>    
</html>